<script>
import { ref } from 'vue';

export default {
  setup() {
    // 1. 想把简单数据变成响应式数据, 得用ref()函数
    const pName = ref('张三')
    console.log(pName.value)
    pName.value = '张学友'

    // 2. 复杂的数据也可以用ref函数转成响应式
    const person = ref({
      name: '刘德虎',
      age: 18,
      sex: '男'
    })
    person.value.name = 'xxxxxxxx'

    return { pName, person }
  }
}
</script>

<template>
  <div>
    <!-- 注意: 在模板中使用, 省略.value -->
    <p>姓名: {{ pName }}</p>
    <button @click="pName = '刘德虎'">改名</button>

    <hr>

    <p>姓名: {{ person.name }}, 年龄: {{ person.age }}, 性别: {{ person.sex }}</p>
    <button @click="person.sex = '女'">修改</button>
  </div>
</template>

<style scoped></style>
